<template>
  <div class="search">
    <el-input v-model="searchReadId" placeholder="enter borrow ReaderId to search" class="input"></el-input>
    <el-button type="primary" value="return" @click="search">search</el-button>
  </div>
  <el-table :data="showBorrowBook" style="width: 100%">
    <el-table-column prop="isbn" label="ISBN" width="140"></el-table-column>
    <el-table-column prop="bookId" label="bookId" width="140"></el-table-column>
    <el-table-column
      prop="borrowReaderId"
      label="borrower"
      width="120"
    ></el-table-column>
    <el-table-column
      prop="borrowDate"
      label="borrow date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column
      prop="returnDate"
      label="return date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <!-- <el-table-column
      prop="returnDate"
      label="归还剩余天数"
      width="120"
    ></el-table-column> -->
    <el-table-column
      prop="fine"
      label="arrearage(yuan)"
      width="150"
      :formatter="arrearageFormatter"
    ></el-table-column>
    <el-table-column label="renew">
      <template v-slot="scope">
        <el-button type="primary" value="return" @click="renewBook(scope.row)"
          >renew </el-button
        >
      </template>
    </el-table-column>
    <!-- <el-table-column label="return">
      <template v-slot="scope">
        <el-button type="primary" value="return" @click="returnBook(scope.row)"
          >return</el-button
        >
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as bookApi from "@/api/books";
import { ElMessage } from "element-plus";
import type { BorrowBook } from "@/domain/book";

const searchReadId = ref('');
const search = () => {
  if (!searchReadId.value) {
    showBorrowBook.value = borrowBook.value;
    return;
  }
  showBorrowBook.value = borrowBook.value.filter(item => searchReadId.value == item.borrowReaderId)
};

const borrowBook = ref<BorrowBook[]>([]);
const showBorrowBook = ref<BorrowBook[]>([]);
const getBorrowBook = () => {
  bookApi.getAllBorrowBooks().then((data) => {
    borrowBook.value = data;
    showBorrowBook.value = data;
    console.log("🚀 ~ file: AllBorrow.vue ~ line 75 ~ bookApi.getAllBorrowBooks ~ data", data)
  });
};
const dateFormatter = (row: any, col: any, value: string | number | Date) => {
  return `${new Date(value).toLocaleDateString()} ${new Date(value).toLocaleTimeString()}`;
};
const arrearageFormatter = (row: any, col: any, value: string | number) => {
  return (Number(value) === 0) ? '/' : value;
};

const returnBook = (params: { bookId: number }) => {
  bookApi.returnBook({ bookId: params.bookId }).then(() => {
    ElMessage.success("return success");
    setTimeout(() => getBorrowBook(), 1000);
  })
  .catch((err) => {
    ElMessage.error(err);
  });
};
const renewBook = (params: { borrowReaderId: number; isbn: string }) => {
  bookApi.renewBook({ userId: params.borrowReaderId, isbn: params.isbn }).then(() => {
    ElMessage.success("renew success");
    setTimeout(() => getBorrowBook(), 1000);
  })
  .catch((err) => {
    ElMessage.error(err);
  });
};
onMounted(() => {
  getBorrowBook();
});
</script>

<style scoped>
.search {
  float: left;
}
.search .input {
  width: 240px;
  margin-right: 20px;
}
</style>
